<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图展示</title>
    <script src="http://api.map.baidu.com/getscript?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <script src="./chart/data.js"></script>
    <!-- <script src="./chart/tj.js"></script> -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body,html{
            height: 100%;
        }
        #chart {
            width: 100%;
            height: 100%;
            background-image:  linear-gradient(to bottom, #31cccf, #331f73);
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script src="./jquery-3.1.1.min.js"></script>
    <script>
        // $(function(){
        //     $.ajax({
        //         type: 'POST',
        //         url: 'http://cs.nes.com.cn/ctcerest/services/beauvappservice/getMap_Second',
        //         // data: {
        //         //     'quyxzqhdm': '110100000000'
        //         // },
        //         dataType: 'json',
        //         contentType: 'application/x-www-form-urlencoded',
        //         success: function(data) {
        //             console.log(data)
        //         }
        //     })
        // })
        echarts.registerMap('HK', mapData)
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'))
        myChart.on('click', function (params) {
            // location.href = './yanqing.html?name=' + params.data.name
            // console.log(params.data)
            switch(params.data.name) {
                case '延庆区':
                    location.href = './yanqing.html?name=' + params.data.name
                break;
                case '怀柔区':
                    location.href = './huairou.html?name=' + params.data.name
                break;
                case '密云区':
                    location.href = './miyun.html?name=' + params.data.name
                break;
                case '平谷区':
                    location.href = './pinggu.html?name=' + params.data.name
                break;
                case '顺义区':
                    location.href = './shunyi.html?name=' + params.data.name
                break;
                case '昌平区':
                    location.href = './changping.html?name=' + params.data.name
                break;
                case '门头沟区':
                    location.href = './mentougou.html?name=' + params.data.name
                break;
                case '海淀区':
                    location.href = './haidian.html?name=' + params.data.name
                break;
                case '朝阳区':
                    location.href = './chaoyang.html?name=' + params.data.name
                break;
                case '通州区':
                    location.href = './tongzhou.html?name=' + params.data.name
                break;
                case '大兴区':
                    location.href = './daxing.html?name=' + params.data.name
                break;
                case '丰台区':
                    location.href = './fengtai.html?name=' + params.data.name
                break;
                case '东城区':
                    location.href = './dongcheng.html?name=' + params.data.name
                break;
                case '西城区':
                    location.href = './xicheng.html?name=' + params.data.name
                break;
                case '石景山区':
                    location.href = './shijingshan.html?name=' + params.data.name
                break;
                case '房山区':
                    location.href = './fangshan.html?name=' + params.data.name
                break;
            }
        })
        // 绘制图表
        myChart.setOption({
        title: {
            text: '',
            subtext: '',
            sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c}'
        },
        series: [
            {
                name: '',
                type: 'map',
                mapType: 'HK', // 自定义扩展图表类型
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name: '朝阳区', value: 20057.34},
                    {name: '海淀区', value: 15477.48},
                    {name: '延庆区', value: 31686.1},
                    {name: '通州区', value: 6992.6},
                    {name: '平谷区', value: 44045.49},
                    {name: '石景山区', value: 40689.64},
                    {name: '怀柔区', value: 37659.78},
                    {name: '大兴区', value: 45180.97},
                    {name: '西城区', value: 55204.26},
                    {name: '东城区', value: 21900.9},
                    {name: '密云区', value: 4918.26},
                    {name: '顺义区', value: 5881.84},
                    {name: '昌平区', value: 4178.01},
                    {name: '门头沟区', value: 2227.92},
                    {name: '房山区', value: 2180.98},
                    {name: '丰台区', value: 9172.94},
                ],
                // 自定义名称映射
                nameMap: {}
            }
        ]
    })
    </script>
</body>
</html>